<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="nav base-flex" style="margin-right:10px">
					<!-- <div>
						<date-picker
							@change="
								val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div> -->
					<div class="nav-li">
						<el-select
							@change="val => crud.refresh({ cid: val })"
							size="mini"
							v-model="value"
							placeholder="请选择"
						>
							<el-option label="全部分类" value=""></el-option>
							<el-option
								v-for="item in options"
								:key="item.cid"
								:label="item.mainName"
								:value="item.cid"
							>
							</el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #slot-setSort="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">
					修改
				</span>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			crud: null,
			enterGoodsInfo: {},
			dayAllowance: [],
			value: '',
			options: []
		};
	},
	components: {},
	mounted() {
		// 获取分类列表
		this.$service.goodsMenagement.tbGoodsCid.platformClassify().then(res => {
			this.options = res;
		});
	},
	methods: {
		setGoodsort(item) {
			const self = this;
			this.$refs['cl-form'].open({
				props: {
					'label-width': '120px',
					width: '570px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'catName',
						label: '原始分类名',
						span: 24,
						value: item.catName,
						component: {
							name: 'el-item.catName',
							attrs: {
								size: 'mini'
							},
							render() {
								return <div>{item.catName}</div>;
							}
						}
					},
					{
						prop: 'cid',
						label: '平台分类名',
						span: 10,
						value: item.platformCid,
						component: {
							name: 'el-platformClassify',
							data() {
								return {
									options: self.options,
									value2: ''
								};
							},
							props: {
								value: [String, Number]
							},
							methods: {
								change(val) {
									console.log(val);
									this.$emit('input', val);
								}
							},
							mounted() {
								this.value2 = this.value;
							},
							render() {
								return (
									<el-select
										v-model={this.value2}
										onChange={this.change}
										placeholder="请选择">
										{this.options.map(item => {
											return (
												<el-option
													label={item.mainName}
													value={item.cid}></el-option>
											);
										})}
									</el-select>
								);
							}
						}
					},
					{
						prop: 'level',
						label: '分类排序：',
						value: item.level,
						component: {
							name: 'ysqlevels',
							data() {
								return {
									ysqLevel: 100
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.ysqLevel = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.ysqLevel}
											controls-position="right"
											onInput={this.input}
											min={0}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					}
				],
				on: {
					submit({ data, close }) {
						self.$service.goodsMenagement.tbGoodsCid
							.update({
								...data,
								id: item.id
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
		},
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.tbGoodsCid)
				.set('dict', {
					api: {
						page: 'page'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},

						{
							label: '原始分类名',
							prop: 'catName',
							align: 'center'
						},
						{
							label: '平台分类名',
							prop: 'platformClassify',
							align: 'center'
						},
						{
							label: '分类id',
							prop: 'platformCid',
							align: 'center'
						},
						{
							label: '分类排序',
							prop: 'level',
							align: 'center',
							sortable: 'custom',
							emptyText: '0',
							'min-width': 100
						}
					],

					op: {
						visible: true,
						layout: ['slot-setSort']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog',
						width: '500px'
					},
					items: [],
					op: {
						visible: true,
						layout: ['confirm']
					}
				})
				.set('layout', [
					['refresh-btn', 'query', 'flex1', 'slot-filter', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					await next(params);
				})
				.on('submit', (isOpen, data, { next }) => {
					next({
						...data,
						startTime: data.time[0],
						endTime: data.time[1]
					});
				})
				.done();

			app.refresh({
				prop: 'createTime',
				order: 'desc'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
.nav {
	font-size: $font12;
	.nav-li {
		margin-left: 10px;
	}
}
</style>
